<!-- 金额输入框 -->
<template>
	<u-input
		ref="input"
		:type="precision ? 'digit' : 'number'"
		:value="inputVal"
		:modelValue="inputVal"
		:placeholder="placeholder"
		:clearable="clearable"
		:disabled="disabled"
		:height="height"
		:input-align="inputAlign"
		:placeholder-style="placeholderStyle"
		:confirm-type="confirmType"
		:custom-style="customStyle"
		:focus="focus"
		:border="border"
		:cursor-spacing="cursorSpacing"
		:selection-start="selectionStart"
		:selection-end="selectionEnd"
		:trim="trim"
		@input="onInput"
		@focus="onFocus"
		@blur="onBlur"
		@confirm="onConfirm"
		@clear="onClear"
	></u-input>
</template>

<script>
export default {
	name: "vk-data-input-number",
	emits: ["update:modelValue", "input", "blur", "focus", "confirm", "clear", "change"],
	props: {
		// 值
		value: {},
		modelValue: {},
		// 输入框的类型，number，money，percentage，discount
		type: {
			type: String,
			default: "number"
		},
		// 提示
		placeholder: {
			type: String,
			default: ""
		},
		// 小数点位数
		precision: {
			type: [String,Number],
			default: 2
		},
		max: {
			type: [String,Number]
		},
		min: {
			type: [String,Number]
		},
		disabled: {
			Type: Boolean
		},
		clearable: {
			Type: [Boolean, String]
		},

		// 输入框文字的对齐方式
		inputAlign: {
			type: String
		},
		// 高度，单位rpx
		height: {
			Type: [String, Number]
		},
		placeholderStyle: {
			type: String,
			default: "color:#c0c4cc"
		},
		confirmType: {
			type: String,
			default: "done"
		},
		customStyle: {
			type: Object
		},
		// 是否显示边框
		border: {
			Type: Boolean,
			default: false
		},
		borderColor: {
			Type: String,
			default: "#dcdfe6"
		},
		cursorSpacing: {
			Type: [Number, String],
			default: 0
		},
		selectionStart: {
			Type: [Number, String]
		},
		selectionEnd: {
			Type: [Number, String]
		},
		trim: {
			Type: Boolean,
			default: true
		},
		// 是否自动获得焦点
		focus: {
			type: Boolean,
			default: false
		}
	},
	data: function() {
		// 组件创建时,进行数据初始化
		return {
			inputVal: ""
		};
	},
	mounted() {
		this.init();
	},
	methods: {
		// 初始化
		init() {},
		// 更新表单值
		_updateValue(value) {
			this.$emit("input", value);
			this.$emit("update:modelValue", value);
			this.$emit("change", value);
		},
		// 数字 value 转 字符串inputVal
		valueToInputVal(value) {
			let that = this;
			let { vk, precision, type } = that;
			if (isNaN(value) || vk.pubfn.isNull(value)) return "";
			if (typeof value == "string") {
				value = Number(value);
				that._updateValue(value);
			}
			let inputVal = "";
			if (type === "money") {
				inputVal = parseFloat((value / 100).toFixed(Number(precision)));
			} else if (type === "percentage") {
				inputVal = parseFloat((value * 100).toFixed(Number(precision)+2));
			} else if (type === "discount") {
				inputVal = parseFloat((value * 10).toFixed(Number(precision)+1));
			} else {
				inputVal = value.toString();
			}
			return inputVal;
		},
		// 字符串inputVal 转 数字 value
		inputValToValue(inputVal) {
			let that = this;
			let { vk, type, precision } = that;
			let value = "";
			if (vk.pubfn.isNotNull(inputVal)) {
				value = Number(inputVal);
				// 此处必须做四舍五入取整,否则会出现精度不准确。
				if (type === "money") {
					value = Math.round(value * 100);
				} else if (type === "percentage") {
					value = parseFloat((value / 100).toFixed(Number(precision)+2));
				} else if (type === "discount") {
					value = parseFloat((value / 10).toFixed(Number(precision)+1));
				}
			}
			return value;
		},
		// 监听 - 获得焦点
		onFocus() {
			this.$emit("focus", this.valueCom);
		},
		// 监听 - 失去焦点
		onBlur() {
			let that = this;
			//在失去焦点时,将值转数字
			let { inputVal, vk, min } = that;
			let value = "";
			if (vk.pubfn.isNotNull(inputVal)) {
				// 判断最小值
				if (vk.pubfn.isNotNull(min) && parseFloat(inputVal) < parseFloat(min)) {
					inputVal = min + "";
				}
				value = that.inputValToValue(inputVal);
				that._updateValue(value);
			}
			that.$emit("blur", value);
		},
		// 监听 - 输入
		onInput(inputVal) {
			let that = this;
			let { vk } = that;
			that.inputVal = inputVal;
			that.$nextTick(function() {
				inputVal = that.inputValFilter(inputVal);
				that.inputVal = inputVal;
				let value = that.inputValToValue(inputVal);
				that._updateValue(value);
			});
		},
		// 监听 - 回车
		onConfirm() {
			let that = this;
			that.onBlur();
			that.$emit("confirm", that.valueCom);
		},
		// 监听 - 清除
		onClear() {
			let that = this;
			that._updateValue("");
			that.$emit("clear", "");
		},
		// 数据过滤
		inputValFilter(inputVal) {
			let that = this;
			let { precision, maxCom: max, vk } = that;
			inputVal = inputVal.toString();
			inputVal = inputVal.replace(/[^\d.]/g, ""); //清除“数字”和“.”以外的字符
			if (Number(precision) == 0) {
				let n1 = inputVal.indexOf(".");
				if (n1 > -1) {
					inputVal = inputVal.substring(0, n1);
				}
			} else if (Number(precision) > 0) {
				inputVal = inputVal.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
				inputVal = inputVal
					.replace(".", "$#$")
					.replace(/\./g, "")
					.replace("$#$", ".");
				let n2 = inputVal.lastIndexOf(".");
				let n1 = inputVal.indexOf(".");
				if (n1 > -1 && n1 + 1 + Number(precision) <= inputVal.length) {
					inputVal = inputVal.substring(0, n1 + 1 + Number(precision));
				}
			}
			//最大值判断
			if (vk.pubfn.isNotNull(max) && parseFloat(inputVal) > parseFloat(max)) {
				inputVal = max + "";
			}
			return inputVal;
		}
	},
	watch: {
		valueCom: {
			immediate: true,
			handler: function(newVal) {
				let that = this;
				that.inputVal = that.valueToInputVal(newVal);
			}
		}
	},
	// 计算属性
	computed: {
		valueCom() {
			// #ifndef VUE3
			return this.value;
			// #endif

			// #ifdef VUE3
			return this.modelValue;
			// #endif
		},
		maxCom(){
			let { type, max, vk } = this;
			if (vk.pubfn.isNotNull(max)){
				return max;
			}
			if (type === "money") {
				return 1000000000000;
			} else if (type === "percentage") {
				return 100;
			} else if (type === "discount") {
				return 10;
			} else {
				return 1000000000000;
			}
		}
	}
};
</script>

<style lang="scss" scoped></style>
